<template>
  <view class="content">
    <!-- <image class="logo" src="/static/logo.png" /> -->
    <view class="text-area">
      <mdm-loading></mdm-loading>
      <mdm-button type="primary">主要按钮</mdm-button>
      {{ counter.count }}
      {{ counter.user.isLoggedIn }}
      <text class="title">{{ title }}</text>
      <Dialog :value="a"></Dialog>
      <text>{{ counter.user.user?.name }}</text>
      <view class="">
        <button type="primary" @click="login">测试</button>
        <button type="primary" @click="update1">undo</button>
        <button type="primary" @click="update2">redo</button>
        <button type="primary" @click="getHistory">获取历史</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Dialog from '@/component/Dialog.vue'
// import { useUserStore } from '@/stores/user'
import { useCounterStore } from '@/stores/test'
import type { LoginRequest } from '@/types'
import './demo.scss'
const title = ref('Hello')

// const user = useUserStore()
const counter = useCounterStore()
console.log('%c Line:26 🍢 counter', 'color:#6ec1c2', counter.redo())
const demo: LoginRequest = { password: '1', username: '1' }
const api = import.meta.env.VITE_API_BASE_URL
console.log('%c Line:34 🍧 api', 'color:#ea7e5c', api)
console.log(demo?.password)

const login = () => {
  counter.user.login({
    name: '111',
    email: '222'
  })
}

const update1 = () => {
  counter.user.undo()
  // user.$patch({
  //   user: {
  //     name: '333'
  //   }
  // })
  // counter.count++
  // console.log('更新不了呢')
  // counter.increment()
}

const update2 = () => {
  counter.user.redo()
  // user.$patch({
  //   user: {
  //     name: '333'
  //   }
  // })
  // counter.count++
  // console.log('更新不了呢')
  // counter.increment()
}

const getHistory = () => {
  // 查看历史记录
  console.log(counter.user.getHistory())
}

let a: string = '1'
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
